<template>
  <TProTable
    :columns="tableColumns"
    :request="requestFn"
    :params="tableParams"
    row-key="id"
  >
    <!-- 搜索栏插槽 -->
    <template #productName_form_item>
      <el-form-item label="商品名称">
        <el-autocomplete
          v-model="tableParams.productName"
          :fetch-suggestions="querySearch"
          clearable
          style="width: 210px;"
          placeholder="请输入内容进行商品名称搜索"
          @select="handleSelect"
        />
      </el-form-item>
    </template>
    <!-- 使用_table_column插槽对指定列---完全自定义 -->
    <template #price_table_column>
      <el-table-column label="价格">
        <el-table-column prop="price" label="参考价格" width="120">
          <template #default="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="实际价格" width="120">
          <template #default="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
      </el-table-column>
    </template>
     <!-- 使用_table_column_content插槽对指定列---内容自定义 -->
    <template #productInfo_table_column_content="scope">
      <div class="flex items-center">
        <el-image :src="scope.row.productImage" class="w-40px h-40px flex-shrink-0"></el-image>
        <div class="ml-12px">{{ scope.row.productName }}</div>
      </div>
    </template>
    <!-- 操作栏 -->
    <template #action_table_column_content="{ row }">
      <el-button
        type="primary"
        link
      >
        按钮 {{ row.id }}
      </el-button>
    </template>
  </TProTable>
</template>

<script lang="ts" setup>
import { TProTable, TProTableColumn } from '@twa/components'
import {getDate} from './data';
import { ref } from 'vue'

const requestFnWrapper = (fn) => {
  return async (params) => {
    const { list, total } = await fn(params)
    return {
      data: list,
      total: Number(total),
    }
  }
}
const requestFn = requestFnWrapper(getDate)

const tableParams = ref({
  productName: ''
})

const tableColumns = ref<TProTableColumn[]>([
  {
    label: '商品名称',
    prop: 'productName',
    hideInTable: true
  },
  {
    label: '商品信息',
    prop: 'productInfo',
    hideInSearch: true
  },
  {
    label: '参考价格',
    hideInSearch: true,
    prop: 'price',
  },
  { 
    label: '创建时间',
    prop: 'createTime',
    paramsRange: ['startCreateTime', 'endCreateTime'],
    valueType: 'dateTimeRange',
  },
  {
    label: '操作',
    prop: 'action',
    hideInSearch: true,
    tableColumnProps:{
      with: 100,
      fixed: 'right',
    }
  },
])

const searchData = ref([
  { value: '瓜子' },
  { value: '鞋子' },
  { value: '鸡腿' },
  { value: '牛奶' },
])
const querySearch = (queryString: string, cb: any) => {
  console.log(queryString)
  const results = queryString ? searchData.value.filter(item => item.value === queryString) : searchData.value
  cb(results)
}
const handleSelect = (item) => {
  console.log(item)
  tableParams.value.productName = item.value
}
</script>